import React, { useState } from 'react';
import { Modal } from 'antd';
/**
 * config例子：
    [
      {
          title: "详情",
          action: "detail",
          getComponent: <div>详情</div>,
        },
    ]
 * 
 * 
 */

const useModal = (config = []) => {
   const [modal, setModal] = useState({
      isShow: false,
      record: null,
      action: '',
   });
   const handleCancel = () => {
      setModal({
         isShow: false,
         record: null,
         action: '',
      });
   };

   //对话框信息
   let modalProps = {
      open: modal.isShow,
      onCancel: handleCancel,
      maskClosable: false,
      footer: null,
   };

   const currentModal = config.find((item) => item.action === modal.action);
   if (currentModal) {
      const { action, getComponent, ...other } = currentModal;
      modalProps = {
         ...modalProps,
         ...other,
      };
   }

   const ModalEle = (
      <Modal width="60%" {...modalProps} key={String(modal.isShow)}>
         {currentModal && (
            <div key={currentModal.action}>
               {currentModal.getComponent(modal.record)}
            </div>
         )}
      </Modal>
   );

   return { ModalEle, modal, setModal };
};

export default useModal;
